<template>
  <div class="service-container">
    <el-card class="table-card">
      <template #header>
        <div class="table-header">
          <h3>问题反馈</h3>
          <div class="search-toggle-area">
            <el-button class="search-toggle-button" @click="toggleSearchBar">
              <el-icon><Search /></el-icon>
            </el-button>
            <el-form :inline="true" :model="queryParams" class="search-form" :class="{'is-hidden': !showSearchBar}" ref="queryForm">
              <el-form-item label="状态">
                <el-select v-model="queryParams.status" placeholder="全部状态" clearable style="width: 160px;">
                  <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </template>

      <el-table :data="tableData" v-loading="loading" border stripe :header-cell-style="{background:'#f5f7fa', color:'#606266'}">
        <el-table-column prop="title" label="标题" show-overflow-tooltip />
        <el-table-column prop="content" label="内容" show-overflow-tooltip />
        <el-table-column label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'RESOLVED' ? 'success' : 'warning'">
              {{ scope.row.status === 'RESOLVED' ? '已解决' : '待处理' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="提交时间" width="180" align="center" />
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button type="primary" link @click="handleView(scope.row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-empty v-if="tableData.length === 0 && !loading" description="暂无反馈数据" class="empty-data-placeholder" />

      <div class="pagination-container">
        <el-pagination :current-page="pagination.page" :page-size="pagination.size" :total="pagination.total" @current-change="handlePageChange" layout="total, prev, pager, next" />
      </div>
    </el-card>

    <el-dialog v-model="detailDialogVisible" width="650px" class="feedback-dialog" :show-close="false">
      <template #header>
        <div class="dialog-header">
          <h3>反馈详情</h3>
          <el-button link icon="el-icon-close" @click="detailDialogVisible=false" class="dialog-close-btn"></el-button>
        </div>
      </template>
      <div v-if="currentFeedback" class="dialog-content">
        <el-descriptions border :column="2" class="description-box">
          <el-descriptions-item label="标题" :span="2">{{ currentFeedback.title }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="currentFeedback.status === 'RESOLVED' ? 'success' : 'warning'" size="small">
              {{ currentFeedback.status === 'RESOLVED' ? '已解决' : '待处理' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ currentFeedback.created_at }}</el-descriptions-item>
        </el-descriptions>
        <div class="content-box">
          <h4>反馈内容</h4>
          <p>{{ currentFeedback.content }}</p>
        </div>
      </div>
      <template #footer>
        <el-button @click="detailDialogVisible=false">关闭</el-button>
        <el-button type="success" v-if="currentFeedback && currentFeedback.status !== 'RESOLVED'" @click="handleResolve">标记已解决</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getFeedbackList, getFeedbackDetail, updateFeedback } from '@/api/notifications'
import { Search } from '@element-plus/icons-vue'

const loading = ref(false)
const tableData = ref([])
const detailDialogVisible = ref(false)
const currentFeedback = ref(null)
const showSearchBar = ref(false)

const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

const queryParams = reactive({
  status: ''
})

const statusOptions = [
  { value: 'PENDING', label: '待处理' },
  { value: 'RESOLVED', label: '已解决' }
]

const toggleSearchBar = () => {
  showSearchBar.value = !showSearchBar.value
}

async function fetchData() {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      size: pagination.size,
      status: queryParams.status
    }
    const res = await getFeedbackList(params)
    if (res.data && res.data.code === 200) {
      tableData.value = res.data.data.list
      pagination.total = res.data.data.total
    } else {
      ElMessage.error(res.data.message || '获取反馈列表失败')
    }
  } catch (e) {
    ElMessage.error('获取反馈列表失败')
  } finally {
    loading.value = false
  }
}

function handleQuery() {
  pagination.page = 1
  fetchData()
}

function resetQuery() {
  queryParams.status = ''
  handleQuery()
}

onMounted(fetchData)

function handlePageChange(page) {
  pagination.page = page
  fetchData()
}

async function handleView(id) {
  try {
    const res = await getFeedbackDetail(id)
    if (res.data && res.data.code === 200) {
      currentFeedback.value = res.data.data
      detailDialogVisible.value = true
    } else {
      ElMessage.error(res.data.message || '获取详情失败')
    }
  } catch (e) {
    ElMessage.error('获取详情失败')
  }
}

async function handleResolve() {
  if (!currentFeedback.value) return
  try {
    const res = await updateFeedback(currentFeedback.value.id, { status: 'RESOLVED' })
    if (res.data && res.data.code === 200) {
      ElMessage.success('已标记为已解决')
      currentFeedback.value.status = 'RESOLVED'
      const row = tableData.value.find(item => item.id === currentFeedback.value.id)
      if (row) row.status = 'RESOLVED'
    } else {
      ElMessage.error(res.data.message || '更新状态失败')
    }
  } catch (e) {
    ElMessage.error('更新状态失败')
  }
}
</script>

<style scoped>
.service-container {
  padding: 20px;
  background-color: #f8f9fa;
  min-height: calc(100vh - 80px);
}
.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-toggle-area {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.search-toggle-button {
  font-size: 20px;
  color: #606266;
  margin-right: 15px;
  transition: all 0.2s;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.search-toggle-button:hover {
  color: #409eff;
  background-color: rgba(64, 158, 255, 0.1);
  border-color: rgba(64, 158, 255, 0.2);
}
.search-form {
  max-width: 1000px;
  width: auto;
  overflow: hidden;
  transition: max-width 0.4s ease-in-out, opacity 0.4s ease-in-out, background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, padding 0.4s ease-in-out, margin-left 0.4s ease-in-out, height 0.4s ease-in-out, min-height 0.4s ease-in-out;
  opacity: 1;
  background-color: transparent;
  border-radius: 8px;
  padding: 0 20px;
  box-shadow: none;
  pointer-events: auto;
  margin-left: 15px;
  white-space: nowrap;
  height: 35px;
  min-height: 35px;
}
.search-form.is-hidden {
  max-width: 0;
  opacity: 0;
  padding: 0;
  margin-left: 0;
  height: 0;
  min-height: 0;
  background-color: transparent;
  box-shadow: none;
  pointer-events: none;
}
:deep(.search-form .el-form-item__label) {
  padding-right: 8px;
}
/* 优化输入框、按钮与DecorationList保持一致 */
:deep(.el-input__inner) {
  border-color: #e0e5ed !important;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 6px;
}
:deep(.el-input__inner:focus) {
  border-color: rgba(64, 158, 255, 0.4) !important;
}
:deep(.el-input__inner::placeholder) {
  color: #aebccf;
}
/* Primary Button */
:deep(.el-button--primary) {
  background-color: rgba(64, 158, 255, 0.1) !important;
  color: #606266 !important;
  border-color: rgba(64, 158, 255, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 6px;
}
:deep(.el-button--primary:hover) {
  background-color: rgba(64, 158, 255, 0.15) !important;
  border-color: rgba(64, 158, 255, 0.3) !important;
}
/* Default Button */
:deep(.el-button--default) {
  background-color: #ffffff !important;
  color: #606266 !important;
  border-color: #dcdfe6 !important;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
:deep(.el-button--default:hover) {
  background-color: #f7f9fa !important;
  border-color: #c8d3dd !important;
}
/* Danger Button */
:deep(.el-button--danger) {
  background-color: rgba(245, 108, 108, 0.1) !important;
  color: #F56C6C !important;
  border-color: rgba(245, 108, 108, 0.2) !important;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius: 6px;
}
:deep(.el-button--danger:hover) {
  background-color: rgba(245, 108, 108, 0.15) !important;
  border-color: rgba(245, 108, 108, 0.3) !important;
}
/* 表格行 hover 效果 */
:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}
.pagination-container {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
  padding: 12px 15px;
  background-color: #f9fbfd;
  border-radius: 10px;
}
.empty-data-placeholder { margin-top: 40px; }
.feedback-dialog :deep(.el-dialog__header) {
  padding: 15px 24px 10px 24px;
  border-bottom: 1px solid #f0f2f5;
}
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dialog-close-btn {
  font-size: 18px;
  color: #909399;
}
.dialog-close-btn:hover {
  color: #606266;
}
.feedback-dialog :deep(.el-dialog__body) {
  background-color: #fafafa;
  padding: 24px;
}
.description-box {
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
}
.content-box {
  margin-top: 24px;
  background: #fff;
  padding: 20px;
  border-radius: 6px;
  line-height: 1.8;
  color: #555f77;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.content-box h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: 600;
}
</style> 